/**
 * 对视频进行截图插件
 * @author wxh
 */
;
var vedioshot = (function ($, window, document) {
	var thisContext;//this
	var VIDEO_ID;//视频id
    var SHOTBAR_ID;//存放截图区域的id
    var _videoWidth = 0;//设置要截图片的宽度
    var _videoHeight = 0;//设置要截图片的高度
    var canvasObj;//画布对象
    var canvasContext;//绘画环境
    var videoObj;//视频对象
	var vedioshotPlugin = function () {
		thisContext = this;
	};
	vedioshotPlugin.prototype = {
		constructor: vedioshotPlugin,
		/**
		 * 初始化准备绘画环境等
		 * @param options
		 *           SHOTBAR：存放截图区域的id
		 *           VIDEO：视频id
		 *           SHOTBTN：截图按钮id
		 */
		init: function(options){
			if(options.SHOTBAR){
				SHOTBAR_ID = options.SHOTBAR;
			}
			if(options.VIDEO){
				VIDEO_ID = options.VIDEO;
			}
			
			canvasObj = document.createElement("canvas");//创建画布
			canvasContext = canvasObj.getContext("2d");//创建绘画图片环境，装图片的地方
			videoObj = document.getElementById(VIDEO_ID);//获取要进行截图的视频
			//videoObj.addEventListener("canplay", function (){
	        	canvasObj.width = _videoWidth = videoObj.videoWidth;
	        	canvasObj.height = _videoHeight = videoObj.videoHeight;
	            canvasContext.fillStyle = '#ffffff';
	            canvasContext.fillRect(0, 0, _videoWidth, _videoHeight);//设置用于填充绘图的颜色、渐变或模式,绘制“已填色”的矩形。默认的填充颜色是黑色。
	            videoObj.removeEventListener("canplay", arguments.callee);
	        //});
		},
		/**
		 * 截图事件
		 */
		clickToShot : function (){
			//videoObj.pause();  
			canvasContext.drawImage(videoObj, 0, 0, _videoWidth, _videoHeight, 0, 0, _videoWidth, _videoHeight);  
	        var dataUrl = canvasObj.toDataURL("image/png");//生成图片的base64编码字符串
	        var fileName = (new Date()).valueOf();
	        //创建缩略图，准备加到shotBar  
	        var appendHtml = '';
	        appendHtml += '<li style="display:inline-block;">'
						+ '<p class="shotPic" onclick="cmedit.AttachmentEdit.shotSelect(this);"><img class="picRotate" id="' + fileName + '" name="selectPic" src="' + dataUrl + '">'
						+ '<span class="shotBtn">'
						+'<i class="iconfont icon-xuanzhuan" onclick="vedioshot.transformPic(this);"></i>'
						+'<i class="iconfont icon-shanchu2" onclick="cmedit.AttachmentEdit.deleteShotPic(this)"></i>'
						+'<input type="text" value="0" style="display:none;" class="rotateNum">'
						+'</span>'
						+'</p>'
						+'<p class="shotTitle" name="shotTitle">' + fileName + ".png" + '</p>'
						+'</li>';
	        
	        $("#shotBar").append(appendHtml);
	        /*var offset = thisContext.getOffset(realShotImg[0]);
	        realShotImg.hide();
	        //添加动画效果
	        shotBigImg.animate(
	        	{
		        	left: offset.x + "px",
		        	top: offset.y + "px",
		        	width: realShotImg.width() + "px",
		        	height: realShotImg.height() + "px"
	        	},
	        	200,
	        	function (){
		        	realShotImg.attr("src", dataUrl).show();
		            shotBigImg.remove();
		            videoObj.play();
	            }
	        );*/
	    },
	    /** 
	     * 获取元素在显示区域的leftOffset和topOffset 
	     * @param elem 
	     * @returns {{x: (Number|number), y: (Number|number)}} 
	     * @private 
	     */  
	    getOffset : function (elem){
	        var pos = {x: elem.offsetLeft, y: elem.offsetTop};
	        var offsetParent = elem.offsetParent;
	        while (offsetParent){
	            pos.x += offsetParent.offsetLeft;
	            pos.y += offsetParent.offsetTop;
	            offsetParent = offsetParent.offsetParent;
	        }
	        return pos;
	    },
	    /**
	  	 * 图片旋转
	  	 */
  	  	transformPic : function(e){
  	  		 event.stopPropagation();
  			 var current =  $(e).parent().find('.rotateNum').val();
  	  		 var img_width, img_height,real_width,real_height;
  	  		 var div_width = $('.shotPic').width();
  	  		 var div_height = $('.shotPic').height();
	    	 current++;
	    	 currentRotate = current*90;
	    	 $(e).parent().find('.rotateNum').val(current);
	    	 $(e).parent().prev().css('transform','rotate(-'+currentRotate+'deg)');
	    	 if(current%2 == 0){
	    		 real_width = $('.shotPic').width();
	    		 real_height = $('.shotPic').height();
	    	 }else{
	    		 real_width = $('.shotPic').height();
	    		 real_height = $('.shotPic').width();
	    	 }  
				
	    	if(real_width <= div_width){
	    		img_width = real_width;
	    	}else{
	    		img_width = div_width;
	    		img_height = real_height * div_width/real_width;
	    	}
	    	if(img_height == null){
	    		img_height = real_height;
		   	}
		   	if(img_height > div_height) {
		   		img_height = div_height;
		   		img_width = img_width * div_height / img_height;
		   	}
		   	$(e).parent().prev().css('width',img_width+'px');
		   	$(e).parent().prev().css('height',img_height+'px');
	    }
	};
	return new vedioshotPlugin();
})(jQuery, window, document);